
<template>
  <div style="clear:both;">
    <ul>
      <li
        v-for="(item,index) in btns"
        v-text="item.text"
        v-bind:data-val="item.val"
        v-on:click="onSelect(item)"
        v-bind:class="['btns',(item.isActive)?'select':'unSelect']">按钮</li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "MultipleSelectionBtns",
  props: {
    btns: {
      type: Array
    },
    isMulti: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
        value:new Set()
    };
  },
  mounted() {},
  methods: {
    onSelect(item) {
      if (this.isMulti) {

        if (item["isActive"]) {
          item["isActive"] = !item["isActive"];
           this.value.delete( item["val"] );
        } else {
          item["isActive"] = true;
           this.value.add( item["val"] );
        }

      } else {
        
        // console.log("click:"+(item.val));

        for (let i in this.btns) {
        
        //   console.log(this.btns[i]["val"]);
        
        if (this.btns[i]["val"] === item["val"]) {
            item["isActive"] = true;
          } else {
            this.btns[i]["isActive"] = false;
          }
        
        }

        this.value.clear();
        this.value.add( item["val"] );

      }

        this.$emit('onSelectLis',this.value);

        // console.log(JSON.stringify(this.btns));


    }

   

  }
};
</script>

<style scoped>
.btns {
  float: left;
  padding: 10px;
  margin: 5px;
  border-color: gainsboro;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  list-style: none;
  cursor: pointer;
  color: black;
  display: inline;
  vertical-align: top;
}


.select {
  color: white;
  background-color: red;
  border-color: red;
}
.unSelect {
  color: black;
  background-color: white;
}
</style>